<template>
  <div id="app">
    <!-- 导航    -->
    <div class="navbar ulhei">
      <div class="container">
        <ul class="nav nav-pills">
          <li class=" topli">
            <img class="logo_" @click="logo_s" src="../public/img/logo.png" alt="" />
            <!-- <a href="#" style="font-size:40px;margin-right:20px">好吃</a> -->
          </li>
          <li class="nav-item topli">
            <router-link to="/" class="nav-link" href="#">主页</router-link>
          </li>
          <li class="nav-item topli kkk">
            <img src="../public/img/xiexian.jpg" alt="" />
          </li>
          <li class="nav-item topli ">
            <router-link to="/arrondi" class="nav-link " href="#"
              >专区</router-link
            >
          </li>
          <li class="nav-item topli kkk">
            <img src="../public/img/xiexian.jpg" alt="" />
          </li>
          <li class=" topli">
            <router-link to="/shop" class="nav-link " href="#"
              >商城</router-link
            >
          </li>
          <li class="nav-item topli kkk">
            <img src="../public/img/xiexian.jpg" alt="" />
          </li>
          <li class="nav-item topli" v-if="is_if">
            <router-link to="/regard" class="nav-link vv" href="#"
              >关于</router-link
            >
          </li>
          <form class="form-inline my-2 my-lg-0">
            <ul class="nav nav-pills  xia_X">
              <li class="nav-item juli hidden-md" v-if="isShow">
                 <div class="input-group">
           <input type="text" class="form-control" placeholder="蛋糕/甜品/奶酪" aria-label="Input group example" aria-describedby="btnGroupAddon">
               </div>   
               </li>
              <li class="nav-item juli hidden-md" v-if="isShow " v-show="isff==''">
                <router-link to="/seach" class="nav-link" href="#">
                
                  <img class="cccsous" src="../public/img/订单.svg" alt="" />
                </router-link>               
              </li>
               
              <li class="nav-item juli hidden-md" v-if="isShow">
                  <router-link to="/trolley" class="nav-link" href="#">
                  <img src="../public/img/gouwuche.svg" alt="" />
                </router-link>
              </li>

              <li class="nav-item juli hidden-md " v-if="isShow" v-show="isff!=''">              
                <router-link to="/login" class="nav-link" href="#">
                  <img src="../public/img/dengluyonghu.svg" alt="" />
                </router-link>
              </li>
            </ul>
          </form>
        </ul>
      
      </div> 
       <span id="spc"></span>
       <a href="" @click="exit_" id="exit_"></a>
    </div>
    <router-view />
    <div class="footer_xx">
      <div class="container">
        <div class="row ccc">
          <p class="col-md-2">公司</p>
          <p class="col-md-2">服务</p>
          <p class="col-md-3">订购与退货</p>
          <p class="col-md-2">法律</p>
          <p class="col-md-3">联系我们</p>
        </div>
      </div>
      <div class="container">
        <div class="row  bbb">
          <div class="col-sm-2">产品展示</div>
          <div class="col-sm-2">支持</div>
          <div class="col-sm-3">订单状态</div>
          <div class="col-sm-2">隐私</div>
          <div class="col-sm-3">在qq上关注我们</div>
        </div>
      </div>
      <div class="container">
        <div class="row  bbb">
          <div class="col-sm-2">在这里工作</div>
          <div class="col-sm-2">常问问题</div>
          <div class="col-sm-3">运输政策</div>
          <div class="col-sm-2">条款和条件</div>
          <div class="col-sm-3">在推特上关注我们</div>
        </div>
      </div>
      <div class="container">
        <div class="row  bbb">
          <div class="col-sm-2">球队</div>
          <div class="col-sm-2">保证</div>
          <div class="col-sm-3">退货政策</div>
          <div class="col-sm-2">社会责任感</div>
          <div class="col-sm-3">在微信上关注我们</div>
        </div>
      </div>
      <div class="bgfoot">
        <span class="p6">版权所有©2020。公司名称保留所有权利。</span>
      </div>
    </div>
  </div>
  <!-- // <footer></footer> -->
</template>




<style lang="less">
.p6{
  font-size: 24px;
}
//scoped  添加此属性 只会渲染当前页面  不会污染全局
#app {
  font-size: 2.2rem;
  min-width: 850px;
}
.topli {
  font-size: 1.8rem;
  line-height: 52px;
}
.nav-pills .nav-link {
  border-radius: 0;
}
.xia_bk {
  border-bottom: 1px solid;
  border-radius: 0;
}
.ulhei {
  // background-color: #5D4B33;
  border-radius: 0px;
  // border: 1px solid #5D4B33;
  color: #5d4b33;
  border-bottom: 1px solid #e9e2de;
  box-shadow: 1px 1px 1px 1px rgb(240, 235, 236);
}
.nav-pills > li > a {
  transition: linear all 0.3s;
  border-radius: 0px;
}
.kkk {
  margin-top: 4px;
}

.topli a {
  color: #684029;
  text-decoration: none;
  font-size: 20px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #ffffff;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
.bgfoot {
  margin-top: 5%;
  width: 100%;
  height: 70px;
background-color: #855648;
}
.topli a:hover {
  color: #bb9772;
  background-color: #ffffff;
}

.juli img {
  width: 24px;
  height: 24px;
 // margin-left: 10px;
  margin-top: -10px;
}
.xia_X {
  margin-left: 230px;
}

.logo_ {
  width: 150px;
  height: 50px;
  margin-top: 6px;
  padding-right: 20px;
}
.navbar-form {
  padding: 0 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
.input-group {
  margin-top: 12px;
  margin-right: -30px;
}
.ccc {
  margin-top: 3%;
  font-size: 32px;
  color: #f07818;
}
.ccc p {
  margin-top: 5%;
}
.bbb {
  margin-top: 2%;
  font-size: 16px;
  color: #999;
}
.form-control{
  margin-right: 16px;
  margin-top: 2px;
}
#spc{
  color: #bb9772;
  font-size: 20px;
  position: absolute;
  top: 24px;
  right: 60px;
}
#exit_{
  font-size: 16px;
  text-decoration: blue;
}

</style>


<script>
export default {
  data() {
    return {
      xia_b: "",
      isShow: true,
      fullWidth: 0,
      is_if:true,
      isff:1
    };
  },
   created(){
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy: function () {
      window.removeEventListener('resize', this.handleResize)
    },
  methods: {
    //  xia_bk(){
    //   console.log(123);
    // //  this.xia_b="xia_bk"
    //    $(".vv").addClass('xia_bk')
    //  }
     handleResize (event) {
        this.fullWidth = document.documentElement.clientWidth;
        // 页面宽度小于750px时，不显示地图
        if (this.fullWidth < 1200) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        if (this.fullWidth < 800) {
          this.is_if = false;
        } else {
          this.is_if = true;
        }
      },
      exit_(){
       localStorage.setItem("username","")
      localStorage.setItem("key","")
      localStorage.setItem(localStorage.getItem("username")+1,"")
      },
      logo_s(){
         this.$router.go(0);
      }
  },
  mounted(){
     if(localStorage.getItem("username")==""){
       $("#spc").html("")
     }else{
       $("#spc").html("欢迎回来"+localStorage.getItem("username"))
       this.isff=""
       $("#exit_").html("退出")
     }

  }
};
</script>
